<template>
  <!-- 集成openTiny 框架集成下拉 包含 下拉树 下拉  图标 等 -->
  <template v-if="icon" >
    <vo-icon-select v-model:value="chanValue" :data="data" @change=change :style="{'--cusWidth': cusWidth}"></vo-icon-select>
  </template>
  <!-- 下拉树  -->
  <template v-else-if="tree">
    <tiny-tree-select
      v-model="chanValue"
      :multiple="multiple"
      :placeholder="placeholder"
      :clearable="clearable"
      :clear-no-match-value="clearNoMatchValue"
      :size="size"
      :collapse-tags="collapseTags"
      :filterable="filterable"
      :multiple-limit="multipleLimit"
      :searchable="searchable"
      :no-data-text="noDataText"
      :input_box_type="inputBoxType"
      :reserve_keyword="reserveKeyword"
      render-type="tree"
      :tree-op="data.treeDs"
      :text-field="props.displayName"
      :value-field="props.displayValue"
      value-field="val" text-field="text"
      :style="{'--cusWidth': cusWidth}"></tiny-tree-select>
  </template>
  <!-- 默认下拉框 -->
  <template v-else="select">
    <tiny-select
      v-model="chanValue"
      :multiple="multiple"
      :disabled="disabled"
      :value-field="valueField"
      :placeholder="placeholder"
      :clearable="clearable"
      :clear-no-match-value="clearNoMatchValue"
      :size="size"
      :collapse-tags="collapseTags"
      :filterable="filterable"
      :multiple-limit="multipleLimit"
      :searchable="searchable"
      :no-data-text="noDataText"
      :input_box_type="inputBoxType"
      :reserve_keyword="reserveKeyword"
      :default_first_option="defaultFirstOption"
      :popper_class="popperClass"
      :popper_append_to_body="popperAppendToBody"
      :automatic_dropdown="automaticDropdown"
      :show-alloption="showAlloption"
      :is-drop-inherit-width="isDropInheritwidth"
      :render_type="renderType"
      :grid-op="gridOp"
      :allow-copy="allowCopy"
      :style="{'--cusWidth': cusWidth}">
      <tiny-option v-for="(item, num) in data.dictDs" :key="item[displayValue]" :label="item[displayName]" :value="item[displayValue]"> </tiny-option>
    </tiny-select>
  </template>
</template>

<script setup>
  import {toRef, ref,reactive, computed, onMounted, getCurrentInstance, watch} from 'vue';
  import {Select as TinySelect, Option as TinyOption, Popover as TinyPopover,TinyTreeSelect } from '@opentiny/vue';
  import vo from '@/pub/vo-select.js';
  let {proxy} = getCurrentInstance();


  //默认值取配置中
  const props = defineProps({
    //是否默认第一个值
    default: false,
    //数据集 数组显示
    options: {type: Array, default: []},
    //默认下拉数据从集中字典中取值
    dictCode: {type: String, default: ''},
    //传入数据集
    data: {type: Array, default: []},
    //值
    value: {type: Object, default: ''},
    //图标
    icon: {type: Boolean, default: false},
    icons: {type: Boolean, default: false},
    //下拉
    select: {type: Boolean, default: false},
    //树状下拉
    tree: {type: Boolean, default: false},
    //数据显示
    displayName: {type: String, default: vo.displayName},
    //数据有效值
    displayValue: {type: String, default: vo.displayValue},
    //是否禁用
    disabled: {type: Boolean, default: vo.disabled},
    //是否多选
    multiple: {type: Boolean, default: vo.multiple},
    //仅多选时适用
    tagType: {type: String, default: vo.tagType},
    //tip 的 dom 节点的位置
    placement: {type: String, default: vo.placement},
    //默认为 true。;是否可以清空选项
    clearable: {type: Boolean, default: vo.clearable},
    //设置是否自动清空无法在options中找到匹配项的值，设置为true时生效。
    clearNoMatchValue: {type: Boolean, default: vo.clearNoMatchValue},
    //设置下拉框的文本对应的数据源的字段名称。
    textField: {type: String, default: vo.textField},
    //medium/small/mini
    size: {type: String, default: vo.size},
    //多选时是否将选中值按文字的形式展示
    collapseTags: {type: Boolean, default: vo.collapseTags},
    //多选时用户最多可以选择的项目数
    multipleLimit: {type: Object, default: vo.multipleLimit},
    //autocomplete 属性
    autocomplete: {type: String, default: vo.autocomplete},
    //	占位符
    placeholder: {type: String, default: vo.placeholder},
    //是否可搜索
    filterable: {type: Boolean, default: vo.filterable},
    //是否下拉面板可搜索
    searchable: {type: Boolean, default: vo.searchable},
    //是否下拉面板可搜索
    allowCreate: {type: Boolean, default: vo.allowCreate},
    //是否下拉面板可搜索
    remote: {type: Boolean, default: vo.remote},
    //搜索条件无匹配时显示的文字
    noMatchText: {type: String, default: vo.noMatchText},
    noDataText: {type: String, default: vo.noDataText},
    showEmptyImage: {type: Boolean, default: vo.showEmptyImage},
    inputBoxType: {type: String, default: vo.inputBoxType},
    popperClass: {type: String, default: ''},
    reserveKeyword: {type: Boolean, default: vo.reserveKeyword},
    defaultFirstOption: {type: Boolean, default: vo.defaultFirstOption},
    popperAppendToBody: {type: Boolean, default: vo.popperAppendToBody},
    automaticDropdown: {type: Boolean, default: vo.automaticDropdown},
    showAlloption: {type: Boolean, default: vo.showAlloption},
    isDropInheritwidth: {type: Boolean, default: vo.isDropInheritwidth},
    renderType: {type: String, default: vo.renderType},
    // gridOp: {type: String, default: vo.gridOp},
    // treeOp: {type: String, default: vo.treeOp},
    allowCopy: {type: Boolean, default: vo.allowCopy},
    copyable: {type: Boolean, default: vo.copyable},
    textSplit: {type: String, default: vo.textSplit},
    valueField: {type: String, default: vo.displayValue}, //有效值
    width: {type: String, default: vo.width}, //选择框宽度
    default: {type: Boolean, default: false},
  });

  //树状特殊处理
  const data = reactive({
    value:props.value,
    visible: false,
    dictDs: [], //数据中心
    treeDs: {data: []},
  });

  //静态数据集赋值
  const options = toRef(props, 'options');
   console.log(2)
  onMounted(() => {
    console.log(1)
    loadDict()
  });
  const loadDict = ()=>{
    if (props.tree) {
      //树状
      getDictTree();
    }  else {
      getDictStores();
    }
  }
  
  const loadDefult = () => {
    if (props.default && (chanValue.value == '' || chanValue.value == null)) {
      chanValue.value = data.dictDs[0][props.displayValue];
    }
  };
  const getDictTree = async () => {
    if(props.options.length > 0){
      data.treeDs.data = toRef(props, 'options');
    }else{
      data.treeDs.data = await proxy.$api.data.getSysDictByCode(props.dictCode);
    }
    console.log(data.treeDs.data )
  };
  //下拉数据
  const getDictStores = async () => {
    if (props.options.length > 0) {
      data.dictDs = toRef(props, 'options');
    } else {
      data.dictDs = await proxy.$api.data.getSysDictByCode(props.dictCode);
    }
    //默认第一个值
    loadDefult();
  };
  // 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
  const chanValue = computed({
    get: () => props.value,
    set: val => {
      emits('update:value', val);
    },
  });
  data.dictDs = props.data;
  const cusWidth = toRef(props, 'width');

  const emits = defineEmits(['update:value','change']);
</script>
<style lang="scss" scoped>
  .icon-list {
    width: 100%;
    height: 400px;
    overflow-y: auto;
    .icon-name {
      padding-top: 2px;
    }
    .demo-icon-list {
      overflow: hidden;
      list-style: none;
      padding: 0 !important;
      border-top: 1px solid var(--el-border-color);
      border-left: 1px solid var(--el-border-color);
      border-radius: 4px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      .icon-item {
        cursor: pointer;
        text-align: center;
        color: var(--el-text-color-regular);
        height: 40px;
        border-right: 1px solid var(--el-border-color);
        border-bottom: 1px solid var(--el-border-color);
        transition: background-color var(--el-transition-duration);
        font-size: 15px;
        :hover {
          background-color: #f5f7fa;
        }
        .demo-svg-icon {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          // cursor: pointer;
        }
      }
      .icon-item:hover {
        font-size: 25px;
      }
    }
  }

  :deep(.svg-icon){
      width: 1.5em;
      height: 2em;
    }
  :deep(.tiny-input) {
    width: var(--cusWidth);
    // width:'100%'
  }

</style>
